<template>
    <div>
        <!-- 开票申请信息:rzKpsqxx-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
                <el-button type="primary" v-if="type == 'useForm'&&isReset==1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox rzKpsqxx">
            <myform :fields="fields3" :rules="rules" ref="form1" :model="model.applyData" :options="options"
                class="m_t_16">
            </myform>
            <div v-if="model.applyData.invoice == '1'">
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>开票申请信息</span>
                </div>
                <myform :fields="fields" :rules="rules" ref="form1" :model="model.applyData" :options="options"
                    class="m_t_16">
                </myform>
                <div class="segment"></div>
                <div class="formArrow d_f a_i_c m_t_30">
                    <img src="../../assets/formArrow.png" alt="">
                    <span>开票单位信息</span>
                </div>
                <div class="rzKpsqxx_form">
                    <myform :fields="fields1" :rules="rules" ref="form2" :model="model.applyData" :options="options"
                        class="m_t_16">
                    </myform>
                </div>
            </div>
            <div class="segment" v-if="fields2.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields2.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div class="acceptance_form" v-if="fields2.length > 0">
                <myform :fields="fields2" :model="model.applyData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { rzKpsqxxType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { formGet, unitFormSet, emplLstAll } from '../../api/system/flowPath'
import { listByParentArr,dictDetailAll } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { copy } from '../../utils/date'
import { NUMBRT_REG } from '../../utils/regular'
import { deptList } from '../../api/system/authority'
import { NUMENGLISH_REG, PHONE_REG } from '../../utils/regular'

const model = {
    applyData: {
        invoice: '0',//是否开具发票 1是 2否
        deptName: '',//申请部门
        deptId: '',//申请部门
        empName: '',//申请人
        empId: '',
        invoiceType: '',//申请发票类型
        invoiceAmount: '',//开票金额
        invoiceProject: '',//开票项目
        email: '',//邮箱
        companyName: '',//单位名称
        taxpayerNumber: '',//纳税人识别号
        address: '',//单位地址
        mobile: '',//电话号码
        bank: '',//开户银行
        bankAccount: '',//银行账户
        taxpayerQualification: '',//是否提供纳税人资格证明复印件
        companyType: '',//企业类型
        received: '',//是否已收款 1-是 2否
        receivedDate: '',//收款日期
        isReview: 1,
        conditionDate: '',//开具日期
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}

        },
        isAudit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: rzKpsqxxType = reactive({
            name: '开票申请信息',
            status: true,
            options: {
                invoice: [
                    {
                        value: '1',
                        label: '是'
                    },
                    {
                        value: '0',
                        label: '否'
                    }

                ],
                deptId: [],
                invoiceType:[],
                empId: [],
                companyType: [],
                taxpayerQualification: [
                    {
                        name: '是',
                        id: 1
                    },
                    {
                        name: '否',
                        id: 2
                    },
                ],
                received: [
                    {
                        name: '是',
                        id: 1
                    },
                    {
                        name: '否',
                        id: 2
                    },
                ],
            },
            model: copy(model),
            subTitle: '',
            fields3: [
                {
                    label: "是否开具发票",
                    prop: 'invoice',
                    placeholder: '请选择是否开具发票',
                    type: 'radio',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            fields: [


                {
                    label: "申请部门",
                    prop: 'deptId',
                    placeholder: '请输入申请部门',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "申请人",
                    prop: 'empId',
                    placeholder: '请输入申请人',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "申请发票类型",
                    prop: 'invoiceType',
                    placeholder: '请输入申请发票类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px'
                },
                {
                    label: "开票金额",
                    prop: 'invoiceAmount',
                    placeholder: '请输入开票金额',
                    type: 'input',
                    labelWidth: '150px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "开票项目",
                    prop: 'invoiceProject',
                    placeholder: '请输入开票项目',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "邮箱",
                    prop: 'email',
                    placeholder: '请输入邮箱',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },

            ],
            fields1: [
                {
                    label: "单位名称",
                    prop: 'companyName',
                    placeholder: '请输入单位名称',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "纳税人识别号",
                    prop: 'taxpayerNumber',
                    placeholder: '请输入纳税人识别号',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "单位地址",
                    prop: 'address',
                    placeholder: '请输入单位地址',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "电话号码",
                    prop: 'mobile',
                    placeholder: '请输入电话号码',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "开户银行",
                    prop: 'bank',
                    placeholder: '请输入开户银行',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "银行账户",
                    prop: 'bankAccount',
                    placeholder: '请输入银行账户',
                    type: 'input',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "是否提供纳税人资格证明复印件",
                    prop: 'taxpayerQualification',
                    placeholder: '请选择是否提供纳税人资格 证明复印件',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "企业类型",
                    prop: 'companyType',
                    placeholder: '请选择企业类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "是否已收款",
                    prop: 'received',
                    placeholder: '请选择是否已收款',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '150px',
                    disabled: false,
                },
                {
                    label: "收款日期",
                    prop: 'receivedDate',
                    placeholder: '请选择收款日期',
                    type: 'date',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            rules: {
                invoice: [
                    { required: true, message: '请选择是否开具发票', trigger: 'blur' },
                ],
                deptId: [
                    { required: true, message: '请选择部门', trigger: 'blur' },
                ],
                empId: [
                    { required: true, message: '请输入申请人', trigger: 'blur' },
                ],
                invoiceType: [
                    { required: true, message: '请输入申请发票类型', trigger: 'blur' },
                ],
                invoiceAmount: [
                    { required: true, message: '请输入开票金额', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '开票金额不能为负数' }
                ],
                invoiceProject: [
                    { required: true, message: '请输入开票项目', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式不正确', trigger: 'blur', },
                ],
                companyName: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                ],
                taxpayerNumber: [
                    { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
                    { pattern: NUMENGLISH_REG, message: '纳税人识别号格式不正确' }
                ],
                // address: [
                //     { required: true, message: '请输入单位地址', trigger: 'blur' },
                // ],
                mobile: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '电话号码格式不正确' }
                ],
                bank: [
                    { required: true, message: '请输入开户银行', trigger: 'blur' },
                ],
                bankAccount: [
                    { required: true, message: '请输入银行账户', trigger: 'blur' },
                ],
                taxpayerQualification: [
                    { required: true, message: '请选择是否提供纳税人资格 证明复印件', trigger: 'change' },
                ],
                // companyType: [
                //     { required: true, message: '请选择企业类型', trigger: 'change' },
                // ],
                received: [
                    { required: true, message: '请选择是否已收款', trigger: 'change' },
                ],
                receivedDate: [
                    { required: true, message: '请选择收款日期', trigger: 'change' },
                ],
            },
            fields2: [],
            id: '',
            isReset:2,
        })
        const router = useRouter()
        const form1 = ref()
        const form2 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true

        })
        const methods = {
            //获取自定义表单
            getData() {
                dictDetailAll({ ids: ['TYPE_OF_ENTERPRISE','TYPE_OF_INVOICE'] }).then((res: any) => {
                data.options.companyType=res.TYPE_OF_ENTERPRISE 
                data.options.invoiceType=res.TYPE_OF_INVOICE
                })
                deptList({}).then((res: any) => {
                    data.options.deptId = res
                })

                emplLstAll({}).then((res: any) => {
                    data.options.empId = res
                })
                formGet({ tag: 'rzKpsqxx' }).then((res: any) => {
                    data.name = res.name
                    data.id = res.id
                    data.isReset=res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.applyData[item.prop]=''
                    })
                    data.fields2 = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields2.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields3.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        for (let key in data.model.applyData) {
                            if(localData.applyData[key]!=null){
                                data.model.applyData[key] = localData.applyData[key]
                            }
                        }
                        if(data.model.applyData.invoice!=null){
                            data.model.applyData.invoice=String(data.model.applyData.invoice)
                        }
                    }

                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    if (data.model.applyData.invoice == '0') {
                        resolve(data.model)
                    } else {
                        form1.value.verification().then((res) => {
                            form2.value.verification().then((res) => {
                                resolve(data.model)
                            }).catch(() => {
                                reject('rzKpsqxx')
                            })
                        }).catch(() => {
                            reject('rzKpsqxx')
                        })
                    }


                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1, form2
        }
    }
})
</script>
<style lang='scss'>
.rzKpsqxx {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 150px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }

    }
}

.rzKpsqxx_form {
    .el-form-item:nth-child(7) {
        .el-form-item__label {
            line-height: 24px !important;
        }
    }
}
</style>